import React, { Component } from 'react';
import { Text, TouchableOpacity, View, Image, ImageBackground, DeviceEventEmitter, Platform, FlatList, ActivityIndicator, Animated, TextInput } from 'react-native';
import Colors from '../constants/Colors';
import { unitWidth, width, statusBarHeight, height, titleHeight } from '../constants/AdapterUtil';
import Modal from "react-native-modal";
import RootModal from "react-native-root-modal";
import { SubmitButton3, SubmitButton4, ReduceButton, AddButton, SubmitButton10, SubmitButton1, SubmitButton11, SubmitButton12 } from './Button';
import TextUtil from '../constants/TextUtil';
import { show } from '../constants/Toast';
import { api_order_workorder_sonCate, api_order_workorder_defaultAddress, api_goods_get_category, api_member_redpack_getredpack, api_merch_list_category } from '../constants/HttpServices';
import { postFetch } from '../constants/HttpExtension';
import { area } from '../constants/area';
import SyanImagePicker from 'react-native-syan-image-picker';
import ImagePicker from 'react-native-image-picker';
import Permissions from 'react-native-permissions';
import * as wechat from 'react-native-wechat';
import NavigationService from '../constants/NavigationService';
import { DeleteTextView } from './MyTextView';

//通用透明度弹框
export class CommonModal extends Component {

    constructor(props) {
        super(props);
        this.state = {
            visible: false,
            scale: new Animated.Value(0),
        }
    }

    showModal = () => {
        this.state.scale.setValue(0.5);
        this.setState({
            visible: true
        }, () => {
            Animated.spring(this.state.scale, {
                toValue: 1,
                duration: 250,
            }).start();
        })
    };

    hideModal = () => {
        Animated.timing(this.state.scale, {
            toValue: 0,
            duration: 200,
        }).start(() => {
            this.setState({
                visible: false
            })
        });
    };

    render() {
        return (
            <RootModal
                style={{
                    top: 0,
                    right: 0,
                    bottom: 0,
                    left: 0,
                    position: 'absolute',
                    backgroundColor: 'rgba(0, 0, 0, 0.3)',
                    flex: 1,
                    flexDirection: 'column',
                    justifyContent: 'center',
                    alignItems: 'center',
                }}
                visible={this.state.visible}>
                <TouchableOpacity style={{ height: '100%', width: '100%' }} onPress={() => { this.hideModal() }} />
                <Animated.View style={{
                    width: 273 * unitWidth,
                    height: 125 * unitWidth,
                    borderColor: Colors.color99,
                    borderWidth: 0.5,
                    borderRadius: 20,
                    backgroundColor: '#fff',
                    flexDirection: 'column',
                    alignItems: 'center',
                    position: 'absolute',
                    transform: [{ scale: this.state.scale }]
                }}>
                    <View style={{ flex: 2, justifyContent: 'center', alignItems: 'center' }}>
                        <Text style={{ fontSize: 15 }}>{this.props.title}</Text>
                    </View>
                    <View style={{ backgroundColor: Colors.colorE8, alignSelf: 'stretch', height: 0.5 }} />
                    <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>
                        <Text style={{ fontSize: 15, flex: 1, textAlign: 'center' }}
                            onPress={this.props.comfirmClick}>{this.props.comfirmText}</Text>
                        <View style={{ backgroundColor: Colors.colorE8, alignSelf: 'stretch', width: 0.5 }} />
                        <Text style={{ fontSize: 15, flex: 1, textAlign: 'center' }}
                            onPress={() => { this.hideModal() }}>{this.props.cancelText}</Text>
                    </View>
                </Animated.View>
            </RootModal>
        )
    }
}

//通用透明度弹框
export class CommonModal2 extends Component {
    constructor(props) {
        super(props);
        this.state = {
            visible: false,
            scale: new Animated.Value(0),
        }
    }

    showModal = () => {
        this.state.scale.setValue(0.5);
        this.setState({
            visible: true
        }, () => {
            Animated.spring(this.state.scale, {
                toValue: 1,
                duration: 250,
            }).start();
        })
    };

    hideModal = () => {
        Animated.timing(this.state.scale, {
            toValue: 0,
            duration: 200,
        }).start(() => {
            this.setState({
                visible: false
            })
        });
    };

    render() {
        return (
            <RootModal
                style={{
                    top: 0,
                    right: 0,
                    bottom: 0,
                    left: 0,
                    position: 'absolute',
                    backgroundColor: 'rgba(0, 0, 0, 0.3)',
                    flex: 1,
                    flexDirection: 'column',
                    justifyContent: 'center',
                    alignItems: 'center',
                }}
                visible={this.state.visible}>
                <TouchableOpacity style={{ height: '100%', width: '100%' }} onPress={() => { this.hideModal() }} />
                <Animated.View style={{
                    width: 273 * unitWidth,
                    height: 125 * unitWidth,
                    borderColor: Colors.color99,
                    borderWidth: 0.5,
                    borderRadius: 20,
                    backgroundColor: '#fff',
                    flexDirection: 'column',
                    alignItems: 'center',
                    position: 'absolute',
                    transform: [{ scale: this.state.scale }]
                }}>
                    <View style={{ flex: 2, justifyContent: 'center', alignItems: 'center' }}>
                        <Text style={{ fontSize: 15 }}>{this.props.title}</Text>
                    </View>
                    <View style={{ backgroundColor: Colors.colorE8, alignSelf: 'stretch', height: 0.5 }} />
                    <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>
                        <Text style={{ fontSize: 15, flex: 1, textAlign: 'center' }}
                            onPress={() => {
                                this.hideModal();
                                this.props.cancelClick ? this.props.cancelClick() : null
                            }}>{this.props.cancelText}</Text>
                        <View style={{ backgroundColor: Colors.colorE8, alignSelf: 'stretch', width: 0.5 }} />
                        <Text style={{ fontSize: 15, flex: 1, textAlign: 'center', color: Colors.colorOrange }}
                            onPress={() => {
                                this.hideModal();
                                this.props.comfirmClick ? this.props.comfirmClick() : null
                            }}>{this.props.comfirmText}</Text>
                    </View>
                </Animated.View>
            </RootModal>
        )
    }
}

//中间只有一个确定的提示弹框
export class CommonModal3 extends Component {

    constructor(props) {
        super(props);
        this.state = {
            visible: false,
            scale: new Animated.Value(0),
        }
    }

    showModal = () => {
        this.state.scale.setValue(0.5);
        this.setState({
            visible: true
        }, () => {
            Animated.spring(this.state.scale, {
                toValue: 1,
                duration: 250,
            }).start();
        })
    };

    hideModal = () => {
        Animated.timing(this.state.scale, {
            toValue: 0,
            duration: 200,
        }).start(() => {
            this.setState({
                visible: false
            })
        });
    };

    render() {
        return (
            <RootModal
                style={{
                    top: 0,
                    right: 0,
                    bottom: 0,
                    left: 0,
                    position: 'absolute',
                    backgroundColor: 'rgba(0, 0, 0, 0.3)',
                    flex: 1,
                    flexDirection: 'column',
                    justifyContent: 'center',
                    alignItems: 'center',
                }}
                visible={this.state.visible}>
                <TouchableOpacity style={{ height: '100%', width: '100%' }} onPress={() => { this.hideModal() }} />
                <Animated.View style={{
                    width: 316 * unitWidth,
                    height: 225 * unitWidth,
                    borderColor: Colors.color99,
                    borderWidth: 0.5,
                    borderRadius: 20,
                    backgroundColor: '#fff',
                    flexDirection: 'column',
                    alignItems: 'center',
                    position: 'absolute',
                    transform: [{ scale: this.state.scale }]
                }}>
                    <View style={{ justifyContent: 'center', alignItems: 'center' }}>
                        <Text style={{ fontSize: 18, textAlign: 'center', marginTop: 70 * unitWidth }}>{this.props.title}</Text>
                    </View>
                    <SubmitButton4 style={{ position: 'absolute', bottom: 20 * unitWidth }} text={this.props.btnText} onPress={this.props.onPress} />
                    <TouchableOpacity activeOpacity={0.7} style={{ position: 'absolute', right: 15 * unitWidth, top: 15 * unitWidth }}
                        onPress={() => {
                            this.hideModal();
                            this.props.onClosePress ? this.props.onClosePress() : null
                        }}>
                        <Image style={{
                            width: 15 * unitWidth, height: 15 * unitWidth,
                        }} source={require('../res/gb_close.png')} resizeMode='stretch' />
                    </TouchableOpacity>
                </Animated.View>
            </RootModal>
        )
    }
}

//通用透明度弹框
export class CommonModal4 extends Component {
    constructor(props) {
        super(props);
        this.state = {
            visible: false,
            scale: new Animated.Value(0),
        }
    }

    showModal = () => {
        this.state.scale.setValue(0.5);
        this.setState({
            visible: true
        }, () => {
            Animated.spring(this.state.scale, {
                toValue: 1,
                duration: 250,
            }).start();
        })
    };

    hideModal = () => {
        Animated.timing(this.state.scale, {
            toValue: 0,
            duration: 200,
        }).start(() => {
            this.setState({
                visible: false
            })
        });
    };

    render() {
        return (
            <RootModal
                style={{
                    top: 0,
                    right: 0,
                    bottom: 0,
                    left: 0,
                    position: 'absolute',
                    backgroundColor: 'rgba(0, 0, 0, 0.3)',
                    flex: 1,
                    flexDirection: 'column',
                    justifyContent: 'center',
                    alignItems: 'center',
                }}
                visible={this.state.visible}>
                <TouchableOpacity style={{ height: '100%', width: '100%' }} onPress={() => { this.hideModal() }} />
                <Animated.View style={{
                    width: 273 * unitWidth,
                    height: 125 * unitWidth,
                    borderColor: Colors.color99,
                    borderWidth: 0.5,
                    borderRadius: 20,
                    backgroundColor: '#fff',
                    flexDirection: 'column',
                    alignItems: 'center',
                    position: 'absolute',
                    transform: [{ scale: this.state.scale }]
                }}>
                    <View style={{ flex: 2, justifyContent: 'center', alignItems: 'center' }}>
                        <Text style={{ fontSize: 17 }}>{this.props.title}</Text>
                        <Text style={{ fontSize: 15, color: Colors.color99, marginTop: 10 * unitWidth }}>{this.props.tips}</Text>
                    </View>
                    <View style={{ backgroundColor: Colors.colorE8, alignSelf: 'stretch', height: 0.5 }} />
                    <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>
                        <Text style={{ fontSize: 15, flex: 1, textAlign: 'center' }}
                            onPress={() => {
                                this.hideModal();
                                this.props.cancelClick ? this.props.cancelClick() : null
                            }}>{this.props.cancelText}</Text>
                        <View style={{ backgroundColor: Colors.colorE8, alignSelf: 'stretch', width: 0.5 }} />
                        <Text style={{ fontSize: 15, flex: 1, textAlign: 'center', color: Colors.colorOrange }}
                            onPress={() => {
                                this.hideModal();
                                this.props.comfirmClick ? this.props.comfirmClick() : null
                            }}>{this.props.comfirmText}</Text>
                    </View>
                </Animated.View>
            </RootModal>
        )
    }
}

//注册时选择纳税类型
export class ChooseModal extends Component {
    constructor(props) {
        super(props);
        this.state = {
            visible: false,
            currentChoose: -1,
            value: ['一般纳税人', '小规模纳税人']
        }
    }

    showModal = () => {
        this.setState({
            visible: true
        }, () => {
            this.props.changeCoverState ? this.props.changeCoverState(this.state.visible) : null
        })
    };

    hideModal = () => {
        this.setState({
            visible: false
        }, () => {
            this.props.changeCoverState ? this.props.changeCoverState(this.state.visible) : null
        })
    };

    render() {
        return (
            <Modal
                animationIn='zoomIn'
                animationOut='zoomOut'
                hasBackdrop={false}
                coverScreen={false}
                useNativeDriver={true}
                backdropOpacity={0.2}
                onBackButtonPress={() => { this.hideModal() }}
                style={{

                }}
                isVisible={this.state.visible}>
                <View style={{
                    flexDirection: 'column', justifyContent: 'center', alignItems: 'flex-start',
                    width: 145 * unitWidth,
                    height: 150 * unitWidth,
                    borderRadius: 20,
                    backgroundColor: '#fff',
                    flexDirection: 'column',
                    position: 'absolute',
                    paddingLeft: 20 * unitWidth,
                    top: 230 * unitWidth, right: 50 * unitWidth
                }}>
                    <TouchableOpacity style={{ flexDirection: 'row', alignItems: 'center' }} activeOpacity={0.7} onPress={() => {
                        this.setState({ currentChoose: 0 }, () => {
                            this.hideModal();
                            this.props.onChoose ? this.props.onChoose(this.state.value[this.state.currentChoose]) : null
                        });
                    }}>
                        <Text style={{ color: this.state.currentChoose == 0 ? Colors.colorOrange : Colors.colorcc }}>{this.state.value[0]}</Text>
                        {this.state.currentChoose == 0 ?
                            <Image style={{ width: 15 * unitWidth, height: 10 * unitWidth, marginLeft: 10 * unitWidth }} source={require('../res/ic_gou.png')} resizeMode='stretch' />
                            :
                            null}
                    </TouchableOpacity>
                    <TouchableOpacity style={{ flexDirection: 'row', alignItems: 'center', marginTop: 20 * unitWidth }} activeOpacity={0.7} onPress={() => {
                        this.setState({ currentChoose: 1 }, () => {
                            this.hideModal();
                            this.props.onChoose ? this.props.onChoose(this.state.value[this.state.currentChoose]) : null
                        });
                    }}>
                        <Text style={{ color: this.state.currentChoose == 1 ? Colors.colorOrange : Colors.colorcc }}>{this.state.value[1]}</Text>
                        {this.state.currentChoose == 1 ?
                            <Image style={{ width: 15 * unitWidth, height: 10 * unitWidth, marginLeft: 10 * unitWidth }} source={require('../res/ic_gou.png')} resizeMode='stretch' />
                            :
                            null}
                    </TouchableOpacity>
                </View>
            </Modal>
        );
    }
}

//首页筛选类型
export class HomeTypeModal extends Component {
    constructor(props) {
        super(props);
        this.state = {
            visible: false,
            twoCate: [],
            threeCate: [],

            oneChoose: -1,
            twoChoose: -1,
            threeChoose: -1,
        }
    }

    componentDidMount() {
        this.subscription = DeviceEventEmitter.addListener('HomeChooseChange', (chooseCate) => {
            this.changeState(chooseCate)
        })
    }

    componentWillUnmount() {
        // 移除
        this.subscription.remove();
    }

    changeState(chooseCate) {
        for (let i = 0, len = this.props.cate.length; i < len; i++) {
            if (chooseCate.id == this.props.cate[i].id) {
                this.setState({
                    oneChoose: i,
                }, () => {
                    this.getTwoCate(this.props.cate[i].id, '2')
                })
                break
            } else {
                this.setState({
                    oneChoose: -1,
                })
            }
        }
    }

    showModal = () => {
        this.setState({
            visible: true
        })
    };

    hideModal = () => {
        this.setState({
            visible: false
        })
    };

    isShow() {
        return this.state.visible;
    }

    render() {
        return (
            <Modal
                animationIn='zoomIn'
                animationOut='zoomOut'
                hasBackdrop={false}
                coverScreen={false}
                useNativeDriver={true}
                onBackButtonPress={() => { this.hideModal() }}
                style={{
                    width: width,
                    marginLeft: 0,
                    marginTop: this.props.marginTop ? this.props.marginTop : 31 * unitWidth,
                    backgroundColor: '#fff',
                    flexDirection: 'column',
                    position: 'absolute',
                    paddingVertical: 10 * unitWidth
                }}
                presentationStyle='fullScreen'
                isVisible={this.state.visible}>
                <TouchableOpacity style={{
                }} activeOpacity={1}>
                    <View style={{ paddingHorizontal: 10 * unitWidth, flexDirection: 'row', flexWrap: 'wrap' }}>
                        {this.getView(this.props.cate, '1')}
                    </View>
                    <View style={{ paddingHorizontal: 10 * unitWidth, flexDirection: 'row', flexWrap: 'wrap', marginTop: 10 * unitWidth }}>
                        {this.getView(this.state.twoCate, '2')}
                    </View>
                    <View style={{ paddingHorizontal: 10 * unitWidth, flexDirection: 'row', flexWrap: 'wrap', marginTop: 10 * unitWidth }}>
                        {this.getView(this.state.threeCate)}
                    </View>
                </TouchableOpacity>
            </Modal>
        );
    }

    getView(list, type) {
        let views = []
        let temp = this.state.oneChoose;
        if (type == '1') {
            temp = this.state.oneChoose;
        } else if (type == '2') {
            temp = this.state.twoChoose;
        } else {
            temp = this.state.threeChoose;
        }
        for (let i = 0, len = list.length; i < len; i++) {
            let item = list[i];
            views.push(
                <TouchableOpacity key={i} style={{
                    justifyContent: 'center',
                    alignItems: 'center',
                    backgroundColor: temp == i ? Colors.colorOrange : Colors.coloree,
                    borderRadius: 20,
                    paddingHorizontal: 7 * unitWidth,
                    marginHorizontal: 7 * unitWidth,
                    marginVertical: 5 * unitWidth
                }} activeOpacity={0.5} onPress={() => {
                    if (type == '1') {
                        if (this.state.oneChoose == i) {
                            this.setState({
                                oneChoose: -1,
                                twoChoose: -1,
                                threeChoose: -1,
                                twoCate: [],
                                threeCate: []
                            }, () => {
                                this.props.onChoose ? this.props.onChoose({}, '1') : null
                            })
                        } else {
                            this.setState({
                                oneChoose: i,
                                twoChoose: -1,
                                threeChoose: -1,
                                twoCate: [],
                                threeCate: []
                            }, () => {
                                this.props.onChoose ? this.props.onChoose(item, '1') : null
                                this.getTwoCate(item.id, '2')
                            })
                        }
                    } else if (type == '2') {
                        this.setState({
                            twoChoose: i,
                            threeChoose: -1,
                            threeCate: []
                        }, () => {
                            this.props.onChoose ? this.props.onChoose(item, '2') : null
                            this.getTwoCate(item.id, '3')
                        })
                    } else {
                        this.setState({
                            threeChoose: i,
                        }, () => {
                            this.props.onChoose ? this.props.onChoose(item, '3') : null
                            this.hideModal()
                        })
                    }
                }}>
                    <Text style={{ color: temp == i ? Colors.white : Colors.color99 }}>{item.name}</Text>
                </TouchableOpacity>
            )
        }
        return views;
    }

    //获取二级类目
    getTwoCate(id, type) {
        let params = {
            parentid: id
        }
        postFetch(api_goods_get_category, params, {
            success: (response) => {
                if (type == '2') {
                    this.setState({
                        twoCate: response.result.list
                    })
                } else if (type == '3') {
                    this.setState({
                        threeCate: response.result.list
                    })
                }
            },
            fail: (response) => {
                show(response.result.message);
            }
        })
    }
}

//服务商筛选类型
export class ServiceProviderTypeModal extends Component {
    constructor(props) {
        super(props);
        this.state = {
            visible: false,
            twoCate: [],
            threeCate: [],

            oneChoose: -1,
            twoChoose: -1,
            threeChoose: -1,
        }
    }

    componentDidMount() {
        this.subscription = DeviceEventEmitter.addListener('ServiceListChange', (chooseCate) => {
            this.changeState(chooseCate)
        })
    }

    componentWillUnmount() {
        // 移除
        this.subscription.remove();
    }

    changeState(chooseCate) {
        for (let i = 0, len = this.props.cate.length; i < len; i++) {
            if (chooseCate.id == this.props.cate[i].id) {
                this.setState({
                    oneChoose: i,
                }, () => {
                    this.getTwoCate(this.props.cate[i].id, '2')
                })
                break
            } else {
                this.setState({
                    oneChoose: -1,
                })
            }
        }
    }

    showModal = () => {
        this.setState({
            visible: true
        })
    };

    hideModal = () => {
        this.setState({
            visible: false
        })
    };

    isShow() {
        return this.state.visible;
    }

    render() {
        return (
            <Modal
                animationIn='zoomIn'
                animationOut='zoomOut'
                hasBackdrop={false}
                coverScreen={false}
                useNativeDriver={true}
                onBackButtonPress={() => { this.hideModal() }}
                style={{
                    width: width,
                    marginLeft: 0,
                    marginTop: this.props.marginTop ? this.props.marginTop : 31 * unitWidth,
                    backgroundColor: '#fff',
                    flexDirection: 'column',
                    position: 'absolute',
                    paddingVertical: 10 * unitWidth
                }}
                presentationStyle='fullScreen'
                isVisible={this.state.visible}>
                <TouchableOpacity style={{
                }} activeOpacity={1}>
                    <View style={{ paddingHorizontal: 10 * unitWidth, flexDirection: 'row', flexWrap: 'wrap' }}>
                        {this.getView(this.props.cate, '1')}
                    </View>
                    <View style={{ paddingHorizontal: 10 * unitWidth, flexDirection: 'row', flexWrap: 'wrap', marginTop: 10 * unitWidth }}>
                        {this.getView(this.state.twoCate, '2')}
                    </View>
                    <View style={{ paddingHorizontal: 10 * unitWidth, flexDirection: 'row', flexWrap: 'wrap', marginTop: 10 * unitWidth }}>
                        {this.getView(this.state.threeCate)}
                    </View>
                </TouchableOpacity>
            </Modal>
        );
    }

    getView(list, type) {
        let views = []
        let temp = this.state.oneChoose;
        if (type == '1') {
            temp = this.state.oneChoose;
        } else if (type == '2') {
            temp = this.state.twoChoose;
        } else {
            temp = this.state.threeChoose;
        }
        for (let i = 0, len = list.length; i < len; i++) {
            let item = list[i];
            views.push(
                <TouchableOpacity key={i} style={{
                    justifyContent: 'center',
                    alignItems: 'center',
                    backgroundColor: temp == i ? Colors.colorOrange : Colors.coloree,
                    borderRadius: 20,
                    paddingHorizontal: 7 * unitWidth,
                    marginHorizontal: 7 * unitWidth,
                    marginVertical: 5 * unitWidth
                }} activeOpacity={0.5} onPress={() => {
                    if (type == '1') {
                        if (this.state.oneChoose == i) {
                            this.setState({
                                oneChoose: -1,
                                twoChoose: -1,
                                threeChoose: -1,
                                twoCate: [],
                                threeCate: []
                            }, () => {
                                this.props.onChoose ? this.props.onChoose({}, '1') : null
                            })
                        } else {
                            this.setState({
                                oneChoose: i,
                                twoChoose: -1,
                                threeChoose: -1,
                                twoCate: [],
                                threeCate: []
                            }, () => {
                                this.props.onChoose ? this.props.onChoose(item, '1') : null
                                this.getTwoCate(item.id, '2')
                            })
                        }
                    } else if (type == '2') {
                        this.setState({
                            twoChoose: i,
                            threeChoose: -1,
                            threeCate: []
                        }, () => {
                            this.props.onChoose ? this.props.onChoose(item, '2') : null
                            // this.getTwoCate(item.id, '3')
                            this.hideModal()
                        })
                    } else {
                        this.setState({
                            threeChoose: i,
                        }, () => {
                            this.props.onChoose ? this.props.onChoose(item, '3') : null
                            this.hideModal()
                        })
                    }
                }}>
                    <Text style={{ color: temp == i ? Colors.white : Colors.color99 }}>{item.catename}</Text>
                </TouchableOpacity>
            )
        }
        return views;
    }

    //获取二级类目
    getTwoCate(id, type) {
        let params = {
            parentid: id
        }
        postFetch(api_merch_list_category, params, {
            success: (response) => {
                if (type == '2') {
                    this.setState({
                        twoCate: response.result.list
                    })
                } else if (type == '3') {
                    this.setState({
                        threeCate: response.result.list
                    })
                }
            },
            fail: (response) => {
                show(response.result.message);
            }
        })
    }
}

//找工单筛选类型
export class FindTypeModal extends Component {
    constructor(props) {
        super(props);
        this.state = {
            visible: false,

            twoCate: [],
            threeCate: [],

            oneChoose: -1,
            twoChoose: -1,
            threeChoose: -1,
        }
    }

    componentDidMount() {
        this.subscription = DeviceEventEmitter.addListener('FineChange', (chooseCate) => {
            this.changeState(chooseCate)
        })
    }

    componentWillUnmount() {
        // 移除
        this.subscription.remove();
    }

    changeState(chooseCate) {
        for (let i = 0, len = this.props.cate.length; i < len; i++) {
            if (chooseCate.id == this.props.cate[i].id) {
                this.setState({
                    oneChoose: i,
                }, () => {
                    // this.getTwoCate(this.props.cate[i].id, '2')
                })
                break
            } else {
                this.setState({
                    oneChoose: -1,
                })
            }
        }
    }

    showModal = () => {
        this.setState({
            visible: true
        })
    };

    hideModal = () => {
        this.setState({
            visible: false
        })
    };

    isShow() {
        return this.state.visible;
    }

    render() {
        return (
            <Modal
                animationIn='zoomIn'
                animationOut='zoomOut'
                hasBackdrop={false}
                coverScreen={false}
                useNativeDriver={true}
                onBackButtonPress={() => { this.hideModal() }}
                style={{
                    width: width,
                    marginLeft: 0,
                    marginTop: 31 * unitWidth,
                    backgroundColor: '#fff',
                    flexDirection: 'column',
                    position: 'absolute',
                    paddingVertical: 10 * unitWidth
                }}
                presentationStyle='fullScreen'
                isVisible={this.state.visible}>
                <TouchableOpacity style={{}} activeOpacity={1}>
                    <View style={{ paddingHorizontal: 10 * unitWidth, flexDirection: 'row', flexWrap: 'wrap' }}>
                        {this.getView(this.props.cate, '1')}
                    </View>
                    {/* <View style={{ paddingHorizontal: 10 * unitWidth, flexDirection: 'row', flexWrap: 'wrap', marginTop: 10 * unitWidth }}>
                            {this.getView(this.state.twoCate, '2')}
                        </View>
                        <View style={{ paddingHorizontal: 10 * unitWidth, flexDirection: 'row', flexWrap: 'wrap', marginTop: 10 * unitWidth }}>
                            {this.getView(this.state.threeCate)}
                        </View> */}
                    {/* <View style={{ paddingHorizontal: 10 * unitWidth, flexDirection: 'row', flexWrap: 'wrap' }}>
                            {this.getView(this.props.cate, '1')}
                        </View> */}
                </TouchableOpacity>
            </Modal>
        );
    }

    getView(list, type) {
        let views = []
        let temp = this.state.oneChoose;
        if (type == '1') {
            temp = this.state.oneChoose;
        } else if (type == '2') {
            temp = this.state.twoChoose;
        } else {
            temp = this.state.threeChoose;
        }
        for (let i = 0, len = list.length; i < len; i++) {
            let item = list[i];
            views.push(
                <TouchableOpacity key={i} style={{
                    justifyContent: 'center',
                    alignItems: 'center',
                    backgroundColor: temp == i ? Colors.colorOrange : Colors.coloree,
                    borderRadius: 20,
                    paddingHorizontal: 10 * unitWidth,
                    marginHorizontal: 10 * unitWidth,
                    marginVertical: 7 * unitWidth
                }} activeOpacity={0.5} onPress={() => {
                    if (type == '1') {
                        if (this.state.oneChoose == i) {
                            this.setState({
                                oneChoose: -1,
                                twoChoose: -1,
                                threeChoose: -1,
                                twoCate: [],
                                threeCate: []
                            }, () => {
                                this.props.onChoose ? this.props.onChoose({}, '1') : null
                            })
                        } else {
                            this.setState({
                                oneChoose: i,
                                twoChoose: -1,
                                threeChoose: -1,
                                twoCate: [],
                                threeCate: []
                            }, () => {
                                this.props.onChoose ? this.props.onChoose(item, '1') : null
                                this.hideModal()
                                // this.getTwoCate(item.id, '2')
                            })
                        }
                    } else if (type == '2') {
                        this.setState({
                            twoChoose: i,
                            threeChoose: -1,
                            threeCate: []
                        }, () => {
                            this.props.onChoose ? this.props.onChoose(item, '2') : null
                            this.getTwoCate(item.id, '3')
                        })
                    } else {
                        this.setState({
                            threeChoose: i,
                        }, () => {
                            this.props.onChoose ? this.props.onChoose(item, '3') : null
                            this.hideModal()
                        })
                    }
                }}>
                    <Text style={{ color: temp == i ? Colors.white : Colors.color99 }}>{item.name}</Text>
                </TouchableOpacity>
            )
        }
        return views;
    }

    //获取二级类目
    getTwoCate(id, type) {
        let params = {
            id: id
        }
        postFetch(api_order_workorder_sonCate, params, {
            success: (response) => {
                if (type == '2') {
                    this.setState({
                        twoCate: response.result
                    })
                } else if (type == '3') {
                    this.setState({
                        threeCate: response.result
                    })
                }
            },
            fail: (response) => {
                show(response.result.message);
            }
        })
    }
}

//找工单时间类型弹框
export class FindTimeModal extends Component {
    constructor(props) {
        super(props);
        this.state = {
            visible: false,
            currentChoose: 0,
        }
    }

    showModal = () => {
        this.setState({
            visible: true
        })
    };

    hideModal = () => {
        this.setState({
            visible: false
        })
    };

    isShow() {
        return this.state.visible;
    }

    render() {
        return (
            <Modal
                animationIn='zoomIn'
                animationOut='zoomOut'
                hasBackdrop={false}
                coverScreen={false}
                useNativeDriver={true}
                onBackButtonPress={() => { this.hideModal() }}
                style={{
                    width: width,
                    marginLeft: 0,
                    marginTop: 31 * unitWidth,
                    backgroundColor: '#fff',
                    flexDirection: 'column',
                    position: 'absolute',
                    paddingVertical: 10 * unitWidth
                }}
                presentationStyle='fullScreen'
                isVisible={this.state.visible}>
                <TouchableOpacity style={{}} activeOpacity={1}>
                    <View style={{ paddingHorizontal: 20 * unitWidth }}>
                        <TouchableOpacity style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', height: 40 * unitWidth }}
                            onPress={() => {
                                this.setState({
                                    currentChoose: 0
                                }, () => {
                                    this.hideModal();
                                    this.props.onChoose ? this.props.onChoose(this.state.currentChoose) : null
                                })
                            }}>
                            <Text style={{ color: this.state.currentChoose == 0 ? Colors.colorOrange : Colors.black }}>全部</Text>
                            {this.state.currentChoose == 0 ?
                                <Image style={{ width: 14 * unitWidth, height: 10 * unitWidth }} source={require('../res/ic_gou.png')} resizeMode='stretch' />
                                : null}
                        </TouchableOpacity>
                        <TouchableOpacity style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', height: 40 * unitWidth }}
                            onPress={() => {
                                this.setState({
                                    currentChoose: 1
                                }, () => {
                                    this.hideModal();
                                    this.props.onChoose ? this.props.onChoose(this.state.currentChoose) : null
                                })
                            }}>
                            <Text style={{ color: this.state.currentChoose == 1 ? Colors.colorOrange : Colors.black }}>今日发布</Text>
                            {this.state.currentChoose == 1 ?
                                <Image style={{ width: 14 * unitWidth, height: 10 * unitWidth }} source={require('../res/ic_gou.png')} resizeMode='stretch' />
                                : null}
                        </TouchableOpacity>
                        <TouchableOpacity style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', height: 40 * unitWidth }}
                            onPress={() => {
                                this.setState({
                                    currentChoose: 2
                                }, () => {
                                    this.hideModal();
                                    this.props.onChoose ? this.props.onChoose(this.state.currentChoose) : null
                                })
                            }}>
                            <Text style={{ color: this.state.currentChoose == 2 ? Colors.colorOrange : Colors.black }}>昨日发布</Text>
                            {this.state.currentChoose == 2 ?
                                <Image style={{ width: 14 * unitWidth, height: 10 * unitWidth }} source={require('../res/ic_gou.png')} resizeMode='stretch' />
                                : null}
                        </TouchableOpacity>
                        <TouchableOpacity style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', height: 40 * unitWidth }}
                            onPress={() => {
                                this.setState({
                                    currentChoose: 3
                                }, () => {
                                    this.hideModal();
                                    this.props.onChoose ? this.props.onChoose(this.state.currentChoose) : null
                                })
                            }}>
                            <Text style={{ color: this.state.currentChoose == 3 ? Colors.colorOrange : Colors.black }}>近一周发布</Text>
                            {this.state.currentChoose == 3 ?
                                <Image style={{ width: 14 * unitWidth, height: 10 * unitWidth }} source={require('../res/ic_gou.png')} resizeMode='stretch' />
                                : null}
                        </TouchableOpacity>
                    </View>
                </TouchableOpacity>
            </Modal>
        );
    }
}

//找交易模式类型弹框
export class FindPayTypeModal extends Component {
    constructor(props) {
        super(props);
        this.state = {
            visible: false,
            currentChoose: 0,
        }
    }

    showModal = () => {
        this.setState({
            visible: true
        })
    };

    hideModal = () => {
        this.setState({
            visible: false
        })
    };

    isShow() {
        return this.state.visible;
    }

    render() {
        return (
            <Modal
                animationIn='zoomIn'
                animationOut='zoomOut'
                hasBackdrop={false}
                coverScreen={false}
                useNativeDriver={true}
                onBackButtonPress={() => { this.hideModal() }}
                style={{
                    width: width,
                    marginLeft: 0,
                    marginTop: 31 * unitWidth,
                    backgroundColor: '#fff',
                    flexDirection: 'column',
                    position: 'absolute',
                    paddingVertical: 10 * unitWidth
                }}
                presentationStyle='fullScreen'
                isVisible={this.state.visible}>
                <TouchableOpacity style={{}} activeOpacity={1}>
                    <View style={{ paddingHorizontal: 20 * unitWidth }}>
                        <TouchableOpacity style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', height: 40 * unitWidth }}
                            onPress={() => {
                                this.setState({
                                    currentChoose: 0
                                }, () => {
                                    this.hideModal();
                                    this.props.onChoose ? this.props.onChoose(this.state.currentChoose) : null
                                })
                            }}>
                            <Text style={{ color: this.state.currentChoose == 0 ? Colors.colorOrange : Colors.black }}>全部</Text>
                            {this.state.currentChoose == 0 ?
                                <Image style={{ width: 14 * unitWidth, height: 10 * unitWidth }} source={require('../res/ic_gou.png')} resizeMode='stretch' />
                                : null}
                        </TouchableOpacity>
                        <TouchableOpacity style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', height: 40 * unitWidth }}
                            onPress={() => {
                                this.setState({
                                    currentChoose: 1
                                }, () => {
                                    this.hideModal();
                                    this.props.onChoose ? this.props.onChoose(this.state.currentChoose) : null
                                })
                            }}>
                            <Text style={{ color: this.state.currentChoose == 1 ? Colors.colorOrange : Colors.black }}>平台交易</Text>
                            {this.state.currentChoose == 1 ?
                                <Image style={{ width: 14 * unitWidth, height: 10 * unitWidth }} source={require('../res/ic_gou.png')} resizeMode='stretch' />
                                : null}
                        </TouchableOpacity>
                        <TouchableOpacity style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', height: 40 * unitWidth }}
                            onPress={() => {
                                this.setState({
                                    currentChoose: 2
                                }, () => {
                                    this.hideModal();
                                    this.props.onChoose ? this.props.onChoose(this.state.currentChoose) : null
                                })
                            }}>
                            <Text style={{ color: this.state.currentChoose == 2 ? Colors.colorOrange : Colors.black }}>线下交易</Text>
                            {this.state.currentChoose == 2 ?
                                <Image style={{ width: 14 * unitWidth, height: 10 * unitWidth }} source={require('../res/ic_gou.png')} resizeMode='stretch' />
                                : null}
                        </TouchableOpacity>
                    </View>
                </TouchableOpacity>
            </Modal>
        );
    }
}

//找工单地区类型弹框
export class FindAreaModal extends Component {
    constructor(props) {
        super(props);
        this.state = {
            visible: false,
            currentChoose: 0,
        }
        this.area = JSON.parse(JSON.stringify(area))
        this.area.splice(0, 0, { name: '不限' })
    }

    showModal = () => {
        this.setState({
            visible: true
        })
    };

    hideModal = () => {
        this.setState({
            visible: false
        })
    };

    isShow() {
        return this.state.visible;
    }

    render() {
        return (
            <Modal
                animationIn='zoomIn'
                animationOut='zoomOut'
                hasBackdrop={false}
                coverScreen={false}
                useNativeDriver={true}
                onBackButtonPress={() => { this.hideModal() }}
                style={{
                    width: width,
                    marginLeft: 0,
                    marginTop: 31 * unitWidth,
                    backgroundColor: '#fff',
                    flexDirection: 'column',
                    position: 'absolute',
                    paddingVertical: 10 * unitWidth
                }}
                presentationStyle='fullScreen'
                isVisible={this.state.visible}>
                <TouchableOpacity style={{}} activeOpacity={1}>
                    <View style={{ paddingHorizontal: 10 * unitWidth, flexDirection: 'row', flexWrap: 'wrap' }}>
                        {this.getView(this.area)}
                    </View>
                </TouchableOpacity>
            </Modal>
        );
    }

    getView(list) {
        let views = []
        for (let i = 0, len = list.length; i < len; i++) {
            let item = list[i];
            views.push(
                <TouchableOpacity key={i} style={{
                    justifyContent: 'center',
                    alignItems: 'center',
                    backgroundColor: this.state.currentChoose == i ? Colors.colorOrange : Colors.coloree,
                    borderRadius: 20,
                    paddingHorizontal: 10 * unitWidth,
                    marginHorizontal: 10 * unitWidth,
                    marginVertical: 7 * unitWidth,
                }} activeOpacity={0.5} onPress={() => {
                    this.setState({
                        currentChoose: i
                    })
                    this.hideModal();
                    this.props.onChoose ? this.props.onChoose(item) : null
                }}>
                    <Text style={{ color: this.state.currentChoose == i ? Colors.white : Colors.color99 }}>{item.name}</Text>
                </TouchableOpacity>
            )
        }
        return views;
    }
}

//等待中的弹框
export class LoadingAndPorgressModal extends Component {

    constructor(props) {
        super(props);
        this.state = {
            visible: false,
            scale: new Animated.Value(0),
        }
    }

    showModal = () => {
        this.state.scale.setValue(0.5);
        this.setState({
            visible: true
        }, () => {
            Animated.spring(this.state.scale, {
                toValue: 1,
                duration: 250,
            }).start();
        })
    };

    hideModal = () => {
        Animated.timing(this.state.scale, {
            toValue: 0,
            duration: 200,
        }).start(() => {
            this.setState({
                visible: false
            })
        });
    };

    isShow() {
        return this.state.visible;
    }

    render() {
        return (
            <RootModal
                style={{
                    top: 0,
                    right: 0,
                    bottom: 0,
                    left: 0,
                    position: 'absolute',
                    backgroundColor: 'rgba(0, 0, 0, 0.3)',
                    flex: 1,
                    flexDirection: 'column',
                    justifyContent: 'center',
                    alignItems: 'center',
                }}
                visible={this.state.visible}>
                <TouchableOpacity style={{ height: '100%', width: '100%' }} onPress={() => { this.hideModal() }} />
                <Animated.View style={{
                    alignItems: 'center', position: 'absolute',
                    transform: [{ scale: this.state.scale }]
                }}>
                    <ActivityIndicator
                        animating={true}
                        color='white'
                        style={{
                            width: 60,
                            height: 60,
                        }}
                        size="large" />
                    {this.props.showProgress == true ? <Text style={{ marginTop: 10 * unitWidth, color: Colors.white }}>{this.props.progress}</Text>
                        : null}
                </Animated.View>
            </RootModal>
        )
    }
}

//更新弹框
export class UpdateModal extends Component {

    constructor(props) {
        super(props);
        this.state = {
            visible: false,
            scale: new Animated.Value(0),
        }
    }

    showModal = () => {
        this.state.scale.setValue(0.5);
        this.setState({
            visible: true
        }, () => {
            Animated.spring(this.state.scale, {
                toValue: 1,
                duration: 250,
            }).start();
        })
    };

    hideModal = () => {
        Animated.timing(this.state.scale, {
            toValue: 0,
            duration: 200,
        }).start(() => {
            this.setState({
                visible: false
            })
        });
    };

    isShow() {
        return this.state.visible;
    }

    render() {
        return (
            <RootModal
                style={{
                    top: 0,
                    right: 0,
                    bottom: 0,
                    left: 0,
                    position: 'absolute',
                    backgroundColor: 'rgba(0, 0, 0, 0.3)',
                    flex: 1,
                    flexDirection: 'column',
                    justifyContent: 'center',
                    alignItems: 'center',
                }}
                visible={this.state.visible}>
                <TouchableOpacity style={{ height: '100%', width: '100%' }} onPress={() => { this.hideModal() }} />
                <Animated.View style={{
                    alignItems: 'center', position: 'absolute',
                    transform: [{ scale: this.state.scale }]
                }}>
                    <ImageBackground style={{
                        width: 311 * unitWidth,
                        height: 482 * unitWidth,
                        flexDirection: 'column',
                        alignItems: 'center',
                    }} source={require('../res/me_bbgxbg.png')} resizeMode='stretch'>
                        <Text style={{ color: Colors.black, fontSize: 19, fontWeight: 'bold', marginTop: 160 * unitWidth }}>新功能上线啦</Text>
                        <Text style={{ color: Colors.black, fontSize: 14, marginTop: 20 * unitWidth }}>新功能上线啦</Text>
                        <SubmitButton3 style={{ position: 'absolute', bottom: 50 * unitWidth }} text='立即更新' onPress={() => {

                        }} />
                        <TouchableOpacity style={{ position: 'absolute', right: 10 * unitWidth, top: 50 * unitWidth }} activeOpacity={0.5}
                            onPress={() => { this.hideModal(); }}>
                            <Image style={{
                                width: 27 * unitWidth,
                                height: 27 * unitWidth
                            }} source={require('../res/me_bbgx.png')} resizeMode='stretch' />
                        </TouchableOpacity>
                    </ImageBackground>
                </Animated.View>
            </RootModal>
        )
    }
}

//底部支付弹框
export class BottomPayModal extends Component {
    constructor(props) {
        super(props);
        this.state = {
            currentChoose: -1,
            visible: false,
            y: new Animated.Value(280 * unitWidth),
        }
    }

    showModal = () => {
        this.setState({
            visible: true
        }, () => {
            Animated.spring(this.state.y, {
                toValue: 0,
                duration: 500,
            }).start();
        })
    };

    hideModal = () => {
        Animated.timing(this.state.y, {
            toValue: 280 * unitWidth,
            duration: 500,
        }).start(() => {
            this.setState({
                visible: false
            })
        });
    };

    render() {
        return (
            <RootModal
                style={{
                    top: 0,
                    right: 0,
                    bottom: 0,
                    left: 0,
                    position: 'absolute',
                    backgroundColor: 'rgba(0, 0, 0, 0.3)',
                    flex: 1,
                    flexDirection: 'column',
                    justifyContent: 'center',
                    alignItems: 'center',
                }}
                visible={this.state.visible}>
                <TouchableOpacity style={{ height: '100%', width: '100%' }} onPress={() => { this.hideModal() }} />
                <Animated.View style={{
                    width: width,
                    height: 280 * unitWidth,
                    flexDirection: 'column',
                    alignItems: 'center',
                    backgroundColor: Colors.white,
                    borderTopLeftRadius: 10,
                    borderTopRightRadius: 10,
                    bottom: 0,
                    position: 'absolute',
                    transform: [{ translateY: this.state.y }]
                }}>
                    <Text style={{ color: Colors.black, fontSize: 17, marginTop: 20 * unitWidth }}>选择支付方式</Text>
                    <View style={{ alignSelf: 'stretch', marginTop: 15 * unitWidth, width: width, backgroundColor: Colors.colorF5, height: 0.5 }} />
                    <TouchableOpacity style={{ alignSelf: 'stretch', height: 50 * unitWidth, justifyContent: 'center', marginTop: 10 * unitWidth }} onPress={() => { this.setState({ currentChoose: 1 }) }}>
                        <View style={{
                            alignSelf: 'stretch',
                            flexDirection: 'row',
                            alignItems: 'center',
                        }}>
                            <Image style={{ width: 25 * unitWidth, height: 25 * unitWidth, marginLeft: 20 * unitWidth }} source={require('../res/fq_fbrwsytwx.png')} />
                            <Text style={{ color: Colors.black, fontSize: 15, marginLeft: 20 * unitWidth }}>微信支付</Text>
                            <Image style={{ width: 20 * unitWidth, height: 20 * unitWidth, position: 'absolute', right: 20 * unitWidth }} source={this.state.currentChoose == 1 ? require('../res/me_txgx2.png') : require('../res/me_txgx22.png')} />
                        </View>
                    </TouchableOpacity>
                    <TouchableOpacity style={{ alignSelf: 'stretch', height: 50 * unitWidth, justifyContent: 'center' }} onPress={() => { this.setState({ currentChoose: 2 }) }}>
                        <View style={{
                            alignSelf: 'stretch',
                            flexDirection: 'row',
                            alignItems: 'center',
                        }}>
                            <Image style={{ width: 25 * unitWidth, height: 25 * unitWidth, marginLeft: 20 * unitWidth }} source={require('../res/fq_fbrwsytzfb.png')} />
                            <Text style={{ color: Colors.black, fontSize: 15, marginLeft: 20 * unitWidth }}>支付宝支付</Text>
                            <Image style={{ width: 20 * unitWidth, height: 20 * unitWidth, position: 'absolute', right: 20 * unitWidth }} source={this.state.currentChoose == 2 ? require('../res/me_txgx2.png') : require('../res/me_txgx22.png')} />
                        </View>
                    </TouchableOpacity>
                    <TouchableOpacity style={{ alignSelf: 'stretch', height: 50 * unitWidth, justifyContent: 'center' }} onPress={() => { this.setState({ currentChoose: 3 }) }}>
                        <View style={{
                            alignSelf: 'stretch',
                            flexDirection: 'row',
                            alignItems: 'center',
                        }}>
                            <Image style={{ width: 25 * unitWidth, height: 25 * unitWidth, marginLeft: 20 * unitWidth }} source={require('../res/ic_yezf.png')} />
                            <Text style={{ color: Colors.black, fontSize: 15, marginLeft: 20 * unitWidth }}>余额支付</Text>
                            <Image style={{ width: 20 * unitWidth, height: 20 * unitWidth, position: 'absolute', right: 20 * unitWidth }} source={this.state.currentChoose == 3 ? require('../res/me_txgx2.png') : require('../res/me_txgx22.png')} />
                        </View>
                    </TouchableOpacity>
                    <View style={{ alignSelf: 'stretch', marginTop: 15 * unitWidth, width: width, backgroundColor: Colors.colorF5, height: 0.5 }} />
                    <View style={{ flexDirection: 'row', alignItems: 'center', flex: 1 }}>
                        <TouchableOpacity style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }} activeOpacity={0.5} onPress={() => { this.hideModal() }} >
                            <Text style={{ fontSize: 17, color: Colors.black }}>取消</Text>
                        </TouchableOpacity>
                        <TouchableOpacity style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }} activeOpacity={0.5} onPress={() => {
                            if (this.state.currentChoose == -1) {
                                show('请选择')
                            } else {
                                this.hideModal();
                                this.props.onClick ? this.props.onClick(this.state.currentChoose) : null
                            }
                        }} >
                            <Text style={{ fontSize: 17, color: Colors.colorOrange }}>确定</Text>
                        </TouchableOpacity>
                    </View>
                </Animated.View>
            </RootModal>
        );
    }
}

//底部选择银行卡弹框
export class BottomBankChooseModal extends Component {
    constructor(props) {
        super(props);
        this.state = {
            currentChoose: 0,
            visible: false,
            y: new Animated.Value(200 * unitWidth),
        }
    }

    showModal = () => {
        this.setState({
            visible: true
        }, () => {
            Animated.spring(this.state.y, {
                toValue: 0,
                duration: 500,
            }).start();
        })
    };

    hideModal = () => {
        Animated.timing(this.state.y, {
            toValue: 200 * unitWidth,
            duration: 500,
        }).start(() => {
            this.setState({
                visible: false
            })
        });
    };

    render() {

        return (
            <RootModal
                style={{
                    top: 0,
                    right: 0,
                    bottom: 0,
                    left: 0,
                    position: 'absolute',
                    backgroundColor: 'rgba(0, 0, 0, 0.3)',
                    flex: 1,
                    flexDirection: 'column',
                    justifyContent: 'center',
                    alignItems: 'center',
                }}
                visible={this.state.visible}>
                <TouchableOpacity style={{ height: '100%', width: '100%' }} onPress={() => { this.hideModal() }} />
                <Animated.View style={{
                    width: width,
                    height: 200 * unitWidth,
                    flexDirection: 'column',
                    alignItems: 'center',
                    backgroundColor: Colors.white,
                    borderTopLeftRadius: 10,
                    borderTopRightRadius: 10,
                    bottom: 0,
                    position: 'absolute',
                    transform: [{ translateY: this.state.y }]
                }}>
                    <Text style={{ color: Colors.black, fontSize: 17, marginTop: 20 * unitWidth }}>选择到账银行</Text>
                    <FlatList
                        style={{ alignSelf: 'stretch' }}
                        showsVerticalScrollIndicator={false}
                        data={this.props.bankList}
                        keyExtractor={(item, index) => {
                            return index.toString()
                        }}
                        renderItem={({ item, index }) => {
                            return (
                                <TouchableOpacity style={{ height: 40 * unitWidth, alignItems: 'center', flexDirection: 'row', paddingHorizontal: 20 * unitWidth }}
                                    onPress={() => {
                                        this.setState({
                                            currentChoose: index
                                        }, () => {
                                            this.hideModal();
                                            this.props.onChoose ? this.props.onChoose(index) : null;
                                        })
                                    }}>
                                    <Text>*{item.name + '(' + TextUtil.getEnd4(item.card_number) + ')'}</Text>
                                    <Image style={{ width: 16 * unitWidth, height: 16 * unitWidth, position: 'absolute', right: 20 * unitWidth }} source={index == this.state.currentChoose ? require('../res/me_txgx2.png') : require('../res/me_txgx22.png')} resizeMode='stretch' />
                                </TouchableOpacity>
                            )
                        }}
                    />
                </Animated.View>
            </RootModal>
        );
    }
}

//底部支付模式弹框
export class BottomPayModeModal extends Component {
    constructor(props) {
        super(props);
        this.state = {
            currentChoose: -1,
            visible: false,
            y: new Animated.Value(230 * unitWidth),
        }
    }

    showModal = () => {
        this.setState({
            visible: true
        }, () => {
            Animated.spring(this.state.y, {
                toValue: 0,
                duration: 500,
            }).start();
        })
    };

    hideModal = () => {
        Animated.timing(this.state.y, {
            toValue: 230 * unitWidth,
            duration: 500,
        }).start(() => {
            this.setState({
                visible: false
            })
        });
    };

    render() {
        return (
            <RootModal
                style={{
                    top: 0,
                    right: 0,
                    bottom: 0,
                    left: 0,
                    position: 'absolute',
                    backgroundColor: 'rgba(0, 0, 0, 0.3)',
                    flex: 1,
                    flexDirection: 'column',
                    justifyContent: 'center',
                    alignItems: 'center',
                }}
                visible={this.state.visible}>
                <TouchableOpacity style={{ height: '100%', width: '100%' }} onPress={() => { this.hideModal() }} />
                <Animated.View style={{
                    width: width,
                    height: 230 * unitWidth,
                    flexDirection: 'column',
                    alignItems: 'center',
                    backgroundColor: Colors.white,
                    borderTopLeftRadius: 10,
                    borderTopRightRadius: 10,
                    bottom: 0,
                    position: 'absolute',
                    transform: [{ translateY: this.state.y }]
                }}>
                    <Text style={{ color: Colors.black, fontSize: 17, marginTop: 20 * unitWidth }}>选择预支付方式</Text>
                    <View style={{ alignSelf: 'stretch', marginTop: 15 * unitWidth, width: width, backgroundColor: Colors.colorF5, height: 0.5 }} />
                    <TouchableOpacity style={{ alignSelf: 'stretch', height: 50 * unitWidth, justifyContent: 'center', marginTop: 10 * unitWidth }} onPress={() => { this.setState({ currentChoose: 1 }) }}>
                        <View style={{
                            alignSelf: 'stretch',
                            flexDirection: 'row',
                            alignItems: 'center',
                        }}>
                            <Text style={{ color: Colors.black, fontSize: 15, marginLeft: 20 * unitWidth }}>全款（低于5万元）</Text>
                            <Image style={{ width: 20 * unitWidth, height: 20 * unitWidth, position: 'absolute', right: 20 * unitWidth }} source={this.state.currentChoose == 1 ? require('../res/me_txgx2.png') : require('../res/me_txgx22.png')} />
                        </View>
                    </TouchableOpacity>
                    <TouchableOpacity style={{ alignSelf: 'stretch', height: 50 * unitWidth, justifyContent: 'center' }} onPress={() => { this.setState({ currentChoose: 2 }) }}>
                        <View style={{
                            alignSelf: 'stretch',
                            flexDirection: 'row',
                            alignItems: 'center',
                        }}>
                            <Text style={{ color: Colors.black, fontSize: 15, marginLeft: 20 * unitWidth }}>5-5（5成定金，收货确认5成）</Text>
                            <Image style={{ width: 20 * unitWidth, height: 20 * unitWidth, position: 'absolute', right: 20 * unitWidth }} source={this.state.currentChoose == 2 ? require('../res/me_txgx2.png') : require('../res/me_txgx22.png')} />
                        </View>
                    </TouchableOpacity>
                    <View style={{ alignSelf: 'stretch', marginTop: 15 * unitWidth, width: width, backgroundColor: Colors.colorF5, height: 0.5 }} />
                    <View style={{ flexDirection: 'row', alignItems: 'center', flex: 1 }}>
                        <TouchableOpacity style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }} activeOpacity={0.5} onPress={() => { this.hideModal() }} >
                            <Text style={{ fontSize: 17, color: Colors.black }}>取消</Text>
                        </TouchableOpacity>
                        <TouchableOpacity style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }} activeOpacity={0.5} onPress={() => {
                            if (this.state.currentChoose == -1) {
                                show('请选择')
                            } else {
                                this.hideModal();
                                this.props.onClick ? this.props.onClick(this.state.currentChoose) : null
                            }
                        }} >
                            <Text style={{ fontSize: 17, color: Colors.colorOrange }}>确定</Text>
                        </TouchableOpacity>
                    </View>
                </Animated.View>
            </RootModal>
        );
    }
}

//底部分享弹框
export class BottomShareModal extends Component {
    constructor(props) {
        super(props);
        this.state = {
            visible: false,
            y: new Animated.Value(190 * unitWidth),
        }
    }

    showModal = () => {
        this.setState({
            visible: true
        }, () => {
            Animated.spring(this.state.y, {
                toValue: 0,
                duration: 500,
            }).start();
        })
    };

    hideModal = () => {
        Animated.timing(this.state.y, {
            toValue: 190 * unitWidth,
            duration: 500,
        }).start(() => {
            this.setState({
                visible: false
            })
        });
    };

    render() {
        return (
            <RootModal
                style={{
                    top: 0,
                    right: 0,
                    bottom: 0,
                    left: 0,
                    position: 'absolute',
                    backgroundColor: 'rgba(0, 0, 0, 0.3)',
                    flex: 1,
                    flexDirection: 'column',
                    justifyContent: 'center',
                    alignItems: 'center',
                }}
                visible={this.state.visible}>
                <TouchableOpacity style={{ height: '100%', width: '100%' }} onPress={() => { this.hideModal() }} />
                <Animated.View style={{
                    width: width,
                    height: 190 * unitWidth,
                    flexDirection: 'column',
                    alignItems: 'center',
                    backgroundColor: Colors.white,
                    borderTopLeftRadius: 5,
                    borderTopRightRadius: 5,
                    bottom: 0,
                    position: 'absolute',
                    transform: [{ translateY: this.state.y }]
                }}>
                    <Text style={{ color: Colors.black, fontSize: 15, marginTop: 20 * unitWidth }}>分享到</Text>
                    <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
                        <TouchableOpacity activeOpacity={0.7} style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}
                            onPress={() => {
                                this.hideModal();
                                this.props.leftClick ? this.props.leftClick() : null
                                this.share(0)
                            }}>
                            <Image style={{ width: 37 * unitWidth, height: 37 * unitWidth }} source={require('../res/fx_wxhy.png')} />
                            <Text style={{ color: Colors.black, fontSize: 15, marginTop: 10 * unitWidth }}>微信好友</Text>
                        </TouchableOpacity>
                        <TouchableOpacity activeOpacity={0.7} style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}
                            onPress={() => {
                                this.hideModal();
                                this.props.rightClick ? this.props.rightClick() : null
                                this.share(1)
                            }}>
                            <Image style={{ width: 37 * unitWidth, height: 37 * unitWidth }} source={require('../res/fx_pyq.png')} />
                            <Text style={{ color: Colors.black, fontSize: 15, marginTop: 10 * unitWidth }}>朋友圈</Text>
                        </TouchableOpacity>
                    </View>
                </Animated.View>
            </RootModal>
        );
    }

    share(type) {
        //判断微信是否安装
        wechat.isWXAppInstalled()
            .then((isInstalled) => {
                if (isInstalled) {
                    if (type == 0) {
                        wechat.shareToSession({
                            type: 'text',
                            title: '濑家',
                            description: global.setting.download_url,
                        })
                            .then(responseCode => {
                                //返回code码，通过responseCode.code登录
                                console.log(responseCode)
                            })
                            .catch(err => {
                                console.log(err)
                            })
                    } else {
                        try {
                            wechat.shareToTimeline({
                                type: 'text',
                                title: '濑家',
                                description: global.setting.download_url,
                            });
                        } catch (e) {
                            if (e instanceof WeChat.WechatError) {
                                console.error(e.stack);
                            } else {
                                throw e;
                            }
                        }
                    }
                } else {
                    Platform.OS == 'ios' ?
                        Alert.alert('没有安装微信', '是否安装微信？', [
                            { text: '取消' },
                            { text: '确定', onPress: () => this.installWechat() }
                        ]) :
                        Alert.alert('没有安装微信', '请先安装微信客户端在进行登录', [
                            { text: '确定' }
                        ])
                }
            })
    }
}

//服务商红包弹框
export class RedEnvelopesModal extends Component {

    constructor(props) {
        super(props);
        this.state = {
            visible: false,
            time: 5,//倒计时
            isOpen: false,//红包是否打开了

            money: '0',
            scale: new Animated.Value(0),
        }
    }

    componentWillUnmount() {
        clearInterval(this.interval);
    }

    showModal = () => {
        this.state.scale.setValue(0.5);
        this.setState({
            visible: true,
            time: 5
        }, () => {
            this.doCountDown();
            Animated.spring(this.state.scale, {
                toValue: 1,
                duration: 250,
            }).start();
        })
    };

    hideModal = () => {
        Animated.timing(this.state.scale, {
            toValue: 0,
            duration: 200,
        }).start(() => {
            this.setState({
                visible: false
            })
        });
    };

    isShow() {
        return this.state.visible;
    }

    doCountDown() {
        this.interval = setInterval(() => {
            if (this.state.time <= 0) {
                clearInterval(this.interval);
                this.interval = undefined;
            } else {
                this.setState({
                    time: this.state.time - 1,
                })
            }
        }, 1000);
    }

    render() {
        return (
            <RootModal
                style={{
                    top: 0,
                    right: 0,
                    bottom: 0,
                    left: 0,
                    position: 'absolute',
                    backgroundColor: 'rgba(0, 0, 0, 0.3)',
                    flex: 1,
                    flexDirection: 'column',
                    justifyContent: 'center',
                    alignItems: 'center',
                }}
                visible={this.state.visible}>
                <TouchableOpacity style={{ height: '100%', width: '100%' }} onPress={() => { this.hideModal() }} />
                <Animated.View style={{
                    alignItems: 'center', position: 'absolute',
                    transform: [{ scale: this.state.scale }]
                }}>
                    {this.getView()}
                </Animated.View>
            </RootModal>
        )
    }

    getView() {
        let item = this.props.redpackInfo

        if (this.state.time > 0) {
            return (
                <View style={{ alignItems: 'center' }}>
                    <Text style={{ fontSize: 20, color: Colors.white }}>{item.title}</Text>
                    <Image style={{
                        width: 275 * unitWidth, borderRadius: 10,
                        height: 351 * unitWidth, marginTop: 17 * unitWidth
                    }} resizeMode='cover' source={{ uri: item.adv_url }} />
                    <Text style={{ fontSize: 20, color: Colors.white, marginTop: 17 * unitWidth }}>倒计时{this.state.time}s</Text>
                </View>
            )
        } else {
            if (this.state.isOpen) {
                return (
                    <View style={{ alignItems: 'center' }}>
                        <ImageBackground style={{
                            width: 310 * unitWidth, alignItems: 'center',
                            height: 399 * unitWidth
                        }} resizeMode='cover' source={require('../res/hb_hbbg.png')}>
                            <Text style={{ fontSize: 29, color: Colors.white, marginTop: 140 * unitWidth }}>恭喜获得</Text>
                            <Text style={{ fontSize: 29, color: Colors.colorGold, marginTop: 10 * unitWidth }}>￥{this.state.money}</Text>
                        </ImageBackground>
                        <TouchableOpacity style={{ marginTop: 30 * unitWidth }} onPress={() => {
                            this.hideModal();
                        }}>
                            <Image style={{ width: 32 * unitWidth, height: 32 * unitWidth }} resizeMode='stretch' source={require('../res/me_close.png')} />
                        </TouchableOpacity>
                    </View>
                )
            } else {
                return (
                    <View style={{ alignItems: 'center' }}>
                        <ImageBackground style={{
                            width: 310 * unitWidth, alignItems: 'center',
                            height: 399 * unitWidth
                        }} resizeMode='cover' source={require('../res/hb_hb.png')}>
                            <Text style={{ fontSize: 18, color: Colors.colorGold, marginTop: 140 * unitWidth }}>看广告  得现金</Text>
                            <Text style={{ fontSize: 18, color: Colors.colorGold, marginTop: 10 * unitWidth }}>一大波福利向你奔来</Text>
                            <TouchableOpacity style={{ marginTop: 50 * unitWidth }} onPress={() => {
                                this.open(item.id)
                            }}>
                                <Image style={{ width: 107 * unitWidth, height: 107 * unitWidth }} resizeMode='cover' source={require('../res/hb_kai.png')} />
                            </TouchableOpacity>
                        </ImageBackground>
                        <TouchableOpacity style={{ marginTop: 30 * unitWidth }}
                            onPress={() => {
                                this.hideModal();
                            }}>
                            <Image style={{ width: 32 * unitWidth, height: 32 * unitWidth }} resizeMode='stretch' source={require('../res/me_close.png')} />
                        </TouchableOpacity>
                    </View>
                )
            }
        }
    }

    //打开红包
    open(id) {
        let params = {
            id: id
        }
        postFetch(api_member_redpack_getredpack, params, {
            success: (response) => {
                this.setState({
                    money: response.result.money,
                    isOpen: true
                })
            },
            fail: (response) => {
                show(response.result.message);
            }
        })
    }
}

//底部原因选择弹框
export class BottomReasonModal extends Component {
    constructor(props) {
        super(props);
        this.state = {
            currentChoose: -1,
            visible: false,
            y: new Animated.Value(322 * unitWidth),
        }
    }

    showModal = () => {
        this.setState({
            visible: true
        }, () => {
            Animated.spring(this.state.y, {
                toValue: 0,
                duration: 500,
            }).start();
        })
    };

    hideModal = () => {
        Animated.timing(this.state.y, {
            toValue: 322 * unitWidth,
            duration: 500,
        }).start(() => {
            this.setState({
                visible: false
            })
        });
    };

    render() {
        return (
            <RootModal
                style={{
                    top: 0,
                    right: 0,
                    bottom: 0,
                    left: 0,
                    position: 'absolute',
                    backgroundColor: 'rgba(0, 0, 0, 0.3)',
                    flex: 1,
                    flexDirection: 'column',
                    justifyContent: 'center',
                    alignItems: 'center',
                }}
                visible={this.state.visible}>
                <TouchableOpacity style={{ height: '100%', width: '100%' }} onPress={() => { this.hideModal() }} />
                <Animated.View style={{
                    width: width,
                    height: 322 * unitWidth,
                    flexDirection: 'column',
                    alignItems: 'center',
                    backgroundColor: Colors.white,
                    borderTopLeftRadius: 10,
                    borderTopRightRadius: 10,
                    bottom: 0,
                    position: 'absolute',
                    transform: [{ translateY: this.state.y }]
                }}>
                    <Text style={{ color: Colors.black, fontSize: 17, marginTop: 20 * unitWidth }}>取消订单</Text>
                    <View style={{ alignSelf: 'stretch', marginTop: 15 * unitWidth, width: width, backgroundColor: Colors.colorF5, height: 0.5 }} />
                    <TouchableOpacity style={{ alignSelf: 'stretch', height: 45 * unitWidth, justifyContent: 'center', marginTop: 10 * unitWidth }} onPress={() => { this.setState({ currentChoose: 1 }) }}>
                        <View style={{
                            alignSelf: 'stretch',
                            flexDirection: 'row',
                            alignItems: 'center',
                        }}>
                            <Text style={{ color: Colors.black, fontSize: 15, marginLeft: 20 * unitWidth }}>我不想买了</Text>
                            <Image style={{ width: 20 * unitWidth, height: 20 * unitWidth, position: 'absolute', right: 20 * unitWidth }} source={this.state.currentChoose == 1 ? require('../res/me_txgx2.png') : require('../res/me_txgx22.png')} />
                        </View>
                    </TouchableOpacity>
                    <TouchableOpacity style={{ alignSelf: 'stretch', height: 45 * unitWidth, justifyContent: 'center' }} onPress={() => { this.setState({ currentChoose: 2 }) }}>
                        <View style={{
                            alignSelf: 'stretch',
                            flexDirection: 'row',
                            alignItems: 'center',
                        }}>
                            <Text style={{ color: Colors.black, fontSize: 15, marginLeft: 20 * unitWidth }}>信息填写错误</Text>
                            <Image style={{ width: 20 * unitWidth, height: 20 * unitWidth, position: 'absolute', right: 20 * unitWidth }} source={this.state.currentChoose == 2 ? require('../res/me_txgx2.png') : require('../res/me_txgx22.png')} />
                        </View>
                    </TouchableOpacity>
                    <TouchableOpacity style={{ alignSelf: 'stretch', height: 45 * unitWidth, justifyContent: 'center' }} onPress={() => { this.setState({ currentChoose: 3 }) }}>
                        <View style={{
                            alignSelf: 'stretch',
                            flexDirection: 'row',
                            alignItems: 'center',
                        }}>
                            <Text style={{ color: Colors.black, fontSize: 15, marginLeft: 20 * unitWidth }}>卖家缺货</Text>
                            <Image style={{ width: 20 * unitWidth, height: 20 * unitWidth, position: 'absolute', right: 20 * unitWidth }} source={this.state.currentChoose == 3 ? require('../res/me_txgx2.png') : require('../res/me_txgx22.png')} />
                        </View>
                    </TouchableOpacity>
                    <TouchableOpacity style={{ alignSelf: 'stretch', height: 45 * unitWidth, justifyContent: 'center' }} onPress={() => { this.setState({ currentChoose: 4 }) }}>
                        <View style={{
                            alignSelf: 'stretch',
                            flexDirection: 'row',
                            alignItems: 'center',
                        }}>
                            <Text style={{ color: Colors.black, fontSize: 15, marginLeft: 20 * unitWidth }}>其他原因</Text>
                            <Image style={{ width: 20 * unitWidth, height: 20 * unitWidth, position: 'absolute', right: 20 * unitWidth }} source={this.state.currentChoose == 4 ? require('../res/me_txgx2.png') : require('../res/me_txgx22.png')} />
                        </View>
                    </TouchableOpacity>
                    <View style={{ alignSelf: 'stretch', marginTop: 15 * unitWidth, width: width, backgroundColor: Colors.colorF5, height: 0.5 }} />
                    <View style={{ flexDirection: 'row', alignItems: 'center', flex: 1 }}>
                        <TouchableOpacity style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }} activeOpacity={0.5} onPress={() => { this.hideModal() }} >
                            <Text style={{ fontSize: 17, color: Colors.black }}>暂不取消</Text>
                        </TouchableOpacity>
                        <TouchableOpacity style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }} activeOpacity={0.5} onPress={() => {
                            if (this.state.currentChoose == -1) {
                                show('请选择')
                            } else {
                                this.hideModal();
                                this.props.onClick ? this.props.onClick(this.state.currentChoose) : null
                            }
                        }} >
                            <Text style={{ fontSize: 17, color: Colors.colorOrange }}>确定取消</Text>
                        </TouchableOpacity>
                    </View>
                </Animated.View>
            </RootModal>
        );
    }
}

//选择相片或视频的弹框
export class MediaPickerModal extends Component {
    constructor(props) {
        super(props);
        this.state = {
            videoOptions: {
                title: '选择',
                // customButtons: [{name: 'fb', title: 'Choose Photo from Facebook'}],可以添加按钮
                storageOptions: {
                    skipBackup: true,
                    path: 'images',
                },
                mediaType: 'video'
            },
            visible: false,
            scale: new Animated.Value(0),
        }
    }

    showModal = () => {
        this.state.scale.setValue(0.5);
        this.setState({
            visible: true
        }, () => {
            Animated.spring(this.state.scale, {
                toValue: 1,
                duration: 250,
            }).start();
        })
    };

    hideModal = () => {
        Animated.timing(this.state.scale, {
            toValue: 0,
            duration: 200,
        }).start(() => {
            this.setState({
                visible: false
            })
        });
    };

    render() {
        return (
            <RootModal
                style={{
                    top: 0,
                    right: 0,
                    bottom: 0,
                    left: 0,
                    position: 'absolute',
                    backgroundColor: 'rgba(0, 0, 0, 0.3)',
                    flex: 1,
                    flexDirection: 'column',
                    justifyContent: 'center',
                    alignItems: 'center',
                }}
                visible={this.state.visible}>
                <TouchableOpacity style={{ height: '100%', width: '100%' }} onPress={() => { this.hideModal() }} />
                <Animated.View style={{
                    width: width, alignItems: 'center', position: 'absolute',
                    bottom: 20 * unitWidth,
                    transform: [{ scale: this.state.scale }]
                }}>
                    <TouchableOpacity style={{}}
                        onPress={() => {
                            this.props.onChooseVideoClick();
                            ImagePicker.launchImageLibrary(this.state.videoOptions, (response) => {
                                if (response.didCancel) {
                                    console.log('User cancelled image picker');
                                } else if (response.error) {
                                    console.log('ImagePicker Error: ', response.error);
                                } else if (response.customButton) {
                                    console.log('User tapped custom button: ', response.customButton);
                                } else {
                                    this.props.chooseVideoSuccess(response)
                                }
                            });
                            this.hideModal();
                        }}>
                        <View style={{
                            height: 50 * unitWidth,
                            width: 335 * unitWidth,
                            borderRadius: 30,
                            alignSelf: 'stretch',
                            backgroundColor: '#fff',
                            justifyContent: 'center',
                            alignItems: 'center'
                        }}>
                            <Text>视频</Text>
                        </View>
                    </TouchableOpacity>
                    <TouchableOpacity style={{}}
                        onPress={() => {
                            this.props.onChooseImageClick();
                            this.requestCameraPermission();
                            this.hideModal();
                        }}>
                        <View style={{
                            height: 50 * unitWidth,
                            width: 335 * unitWidth,
                            borderRadius: 30,
                            marginTop: 10 * unitWidth,
                            alignSelf: 'stretch',
                            backgroundColor: '#fff',
                            justifyContent: 'center',
                            alignItems: 'center'
                        }}>
                            <Text>相册</Text>
                        </View>
                    </TouchableOpacity>
                    <TouchableOpacity style={{}}
                        onPress={() => {
                            this.hideModal();
                        }}>
                        <View style={{
                            height: 50 * unitWidth,
                            width: 335 * unitWidth,
                            borderRadius: 30,
                            marginTop: 10 * unitWidth,
                            alignSelf: 'stretch',
                            backgroundColor: '#fff',
                            justifyContent: 'center',
                            alignItems: 'center',
                        }}>
                            <Text>取消</Text>
                        </View>
                    </TouchableOpacity>
                </Animated.View>
            </RootModal>
        )
    }

    requestCameraPermission() {
        try {
            Permissions.request('camera', {
                type: 'always',
            }).then(response => {
                console.log(response)
                if (response === 'authorized') {
                    this.doChoose();
                }
            }).catch(err => {
                console.log(err)
            })
        } catch (err) {
            console.log(err);
        }
    }

    doChoose() {
        // width	int	图片宽度
        // height	int	图片高度
        // uri	string	图片路径
        // original_uri	string	图片原始路径，仅 Android
        // type	string	文件类型，仅 Android，当前只返回 image
        // size	int	图片大小，单位为字节 b
        // base64	string	图片的 base64 编码，如果 enableBase64 设置 false，则不返回该属性
        SyanImagePicker.showImagePicker({
            imageCount: 9,
            isCamera: false,
            minimumCompressSize: 100,
            quality: 50,
            enableBase64: true
        }, (err, selectedPhotos) => {
            if (err) {
                // 取消选择
                return;
            }
            // 选择成功，渲染图片
            console.log(selectedPhotos[0].uri)
            this.props.chooseImageSuccess(selectedPhotos)
        })
    }
}

//评价后提示的弹框
export class EvaluateTipsModal extends Component {
    constructor(props) {
        super(props);
        this.state = {
            visible: false,
            addressInfo: {},
            scale: new Animated.Value(0),
        }
    }

    componentDidMount() {
        this.getAddress()
    }

    showModal = () => {
        this.state.scale.setValue(0.5);
        this.setState({
            visible: true
        }, () => {
            Animated.spring(this.state.scale, {
                toValue: 1,
                duration: 250,
            }).start();
        })
    };

    hideModal = () => {
        Animated.timing(this.state.scale, {
            toValue: 0,
            duration: 200,
        }).start(() => {
            this.setState({
                visible: false
            })
        });
    };

    render() {
        return (
            <RootModal
                style={{
                    top: 0,
                    right: 0,
                    bottom: 0,
                    left: 0,
                    position: 'absolute',
                    backgroundColor: 'rgba(0, 0, 0, 0.3)',
                    flex: 1,
                    flexDirection: 'column',
                    justifyContent: 'center',
                    alignItems: 'center',
                }}
                visible={this.state.visible}>
                <TouchableOpacity style={{ height: '100%', width: '100%' }} onPress={() => { this.hideModal() }} />
                <Animated.View style={{
                    width: 316 * unitWidth,
                    height: 360 * unitWidth,
                    borderColor: Colors.color99,
                    borderWidth: 0.5,
                    borderRadius: 20,
                    backgroundColor: '#fff',
                    flexDirection: 'column',
                    alignItems: 'center',
                    position: 'absolute',
                    transform: [{ scale: this.state.scale }]
                }}>
                    <View style={{ justifyContent: 'center', alignItems: 'center' }}>
                        <Text style={{ fontSize: 16, textAlign: 'center', marginTop: 60 * unitWidth, color: Colors.color33 }}>{this.props.title}</Text>
                        <Text style={{
                            fontSize: 14, textAlign: 'center', width: 270 * unitWidth,
                            marginTop: 26 * unitWidth, color: Colors.color33
                        }}>
                            {/* {'Tip：完成本订单后，请尽快开发票寄到' +
                                    this.state.addressInfo.province + this.state.addressInfo.city + this.state.addressInfo.area + this.state.addressInfo.address +
                                    ' ，平台每月初对账上月付款金额，如无收到发票，将顺延对账。'} */}
                            {this.state.addressInfo.title}
                        </Text>
                        <View style={{
                            justifyContent: 'center', alignItems: 'flex-start', marginTop: 24 * unitWidth, paddingHorizontal: 8 * unitWidth,
                            width: 290 * unitWidth, minHeight: 86 * unitWidth, backgroundColor: Colors.colorE8, borderRadius: 10
                        }}>
                            <Text style={{ fontSize: 14, textAlign: 'center', color: Colors.color33 }}>联系方式：{this.state.addressInfo.name + '   ' + this.state.addressInfo.mobile}</Text>
                            <Text style={{
                                fontSize: 14, textAlign: 'center',
                                marginTop: 8 * unitWidth, color: Colors.color33
                            }}>收货地址：{this.state.addressInfo.address}</Text>
                        </View>
                    </View>
                    <SubmitButton4 style={{ position: 'absolute', bottom: 20 * unitWidth }} text={this.props.btnText} onPress={this.props.onPress} />
                    <TouchableOpacity activeOpacity={0.7} style={{ position: 'absolute', right: 15 * unitWidth, top: 15 * unitWidth }}
                        onPress={() => {
                            this.hideModal();
                            this.props.onClosePress ? this.props.onClosePress() : null
                        }}>
                        <Image style={{
                            width: 15 * unitWidth, height: 15 * unitWidth,
                        }} source={require('../res/gb_close.png')} resizeMode='stretch' />
                    </TouchableOpacity>
                </Animated.View>
            </RootModal>
        )
    }

    getAddress() {
        let params = {

        }
        postFetch(api_order_workorder_defaultAddress, params, {
            success: (response) => {
                this.setState({
                    addressInfo: response.result
                })
            },
            fail: (response) => {
                show(response.result.message);
            }
        })
    }
}

//底部选择地址弹框
export class BottomAddressChooseModal extends Component {
    constructor(props) {
        super(props);
        this.state = {
            currentChoose: this.props.currentChooseAddressIndex,
            visible: false,
            y: new Animated.Value(200 * unitWidth),
        }
    }

    showModal = () => {
        this.setState({
            visible: true
        }, () => {
            Animated.spring(this.state.y, {
                toValue: 0,
                duration: 500,
            }).start();
        })
    };

    hideModal = () => {
        Animated.timing(this.state.y, {
            toValue: 200 * unitWidth,
            duration: 500,
        }).start(() => {
            this.setState({
                visible: false
            })
        });
    };

    render() {

        return (
            <RootModal
                style={{
                    top: 0,
                    right: 0,
                    bottom: 0,
                    left: 0,
                    position: 'absolute',
                    backgroundColor: 'rgba(0, 0, 0, 0.3)',
                    flex: 1,
                    flexDirection: 'column',
                    justifyContent: 'center',
                    alignItems: 'center',
                }}
                visible={this.state.visible}>
                <TouchableOpacity style={{ height: '100%', width: '100%' }} onPress={() => { this.hideModal() }} />
                <Animated.View style={{
                    width: width,
                    height: 200 * unitWidth,
                    flexDirection: 'column',
                    alignItems: 'center',
                    backgroundColor: Colors.white,
                    borderTopLeftRadius: 10,
                    borderTopRightRadius: 10,
                    bottom: 0,
                    position: 'absolute',
                    transform: [{ translateY: this.state.y }]
                }}>
                    <Text style={{ color: Colors.black, fontSize: 17, marginTop: 20 * unitWidth }}>选择地址</Text>
                    <FlatList
                        style={{ alignSelf: 'stretch', marginTop: 10 * unitWidth }}
                        showsVerticalScrollIndicator={false}
                        data={this.props.addressList}
                        keyExtractor={(item, index) => {
                            return index.toString()
                        }}
                        renderItem={({ item, index }) => {
                            return (
                                <TouchableOpacity style={{ height: 40 * unitWidth, alignItems: 'center', flexDirection: 'row', paddingHorizontal: 20 * unitWidth }}
                                    onPress={() => {
                                        this.setState({
                                            currentChoose: index
                                        }, () => {
                                            this.hideModal();
                                            this.props.onChoose ? this.props.onChoose(item, index) : null;
                                        })
                                    }}>
                                    <Text>*{item.realname + '  ' + item.mobile + '   ' + item.address}</Text>
                                    <Image style={{ width: 16 * unitWidth, height: 16 * unitWidth, position: 'absolute', right: 20 * unitWidth }} source={index == this.state.currentChoose ? require('../res/me_txgx2.png') : require('../res/me_txgx22.png')} resizeMode='stretch' />
                                </TouchableOpacity>
                            )
                        }}
                    />
                    <TouchableOpacity style={{ alignSelf: 'center', position: 'absolute', right: 20 * unitWidth, top: 20 * unitWidth }}
                        onPress={() => {
                            this.hideModal()
                            NavigationService.navigate('MeAddAddress')
                        }}>
                        {/* <Text style={{ color: Colors.blue, borderBottomColor: Colors.blue, borderBottomWidth: 0.5 }}>去添加</Text> */}
                        <Image style={{ width: 15 * unitWidth, height: 15 * unitWidth }} source={require('../res/me_grxx.png')} />
                    </TouchableOpacity>
                </Animated.View>
            </RootModal>
        );
    }
}

//底部数量输入弹框
export class BottomCountModal extends Component {
    constructor(props) {
        super(props);
        this.state = {
            visible: false,
            y: new Animated.Value(190 * unitWidth),
            count: '1',
        }
    }

    showModal = () => {
        this.setState({
            visible: true
        }, () => {
            Animated.spring(this.state.y, {
                toValue: 0,
                duration: 500,
            }).start();
        })
    };

    hideModal = () => {
        Animated.timing(this.state.y, {
            toValue: 190 * unitWidth,
            duration: 500,
        }).start(() => {
            this.setState({
                visible: false
            })
        });
    };

    render() {
        const item = this.props.item;

        return (
            <RootModal
                style={{
                    top: 0,
                    right: 0,
                    bottom: 0,
                    left: 0,
                    position: 'absolute',
                    backgroundColor: 'rgba(0, 0, 0, 0.3)',
                    flex: 1,
                    flexDirection: 'column',
                    justifyContent: 'center',
                    alignItems: 'center',
                }}
                visible={this.state.visible}>
                <TouchableOpacity style={{ height: '100%', width: '100%' }} onPress={() => { this.hideModal() }} />
                <Animated.View style={{
                    width: width,
                    height: 190 * unitWidth,
                    flexDirection: 'column',
                    alignItems: 'center',
                    backgroundColor: Colors.white,
                    borderTopLeftRadius: 5,
                    borderTopRightRadius: 5,
                    bottom: 0,
                    position: 'absolute',
                    transform: [{ translateY: this.state.y }]
                }}>
                    <View style={{ height: 109 * unitWidth, flexDirection: 'row', alignItems: 'center' }}>
                        <Image style={{
                            width: 110 * unitWidth, height: 80 * unitWidth
                        }}
                            source={{ uri: item.thumb }} resizeMode='contain' />
                        <View style={{ marginLeft: 10 * unitWidth }}>
                            <Text style={{ color: Colors.black, fontSize: 14, marginVertical: 4 * unitWidth, width: 190 * unitWidth }}>{item.title}</Text>
                            <View style={{
                                paddingHorizontal: 7 * unitWidth, borderWidth: 0.5, marginTop: 5 * unitWidth,
                                borderColor: Colors.colorRed, borderRadius: 5, alignSelf: 'flex-start'
                            }}>
                                <Text style={{ color: Colors.colorRed, fontSize: 10, }}>线下价格:￥{item.offlineprice}</Text>
                            </View>
                            <View style={{ alignSelf: 'flex-start', marginTop: 2 * unitWidth, flexDirection: 'row', alignItems: 'center', width: 190 * unitWidth }}>
                                <Text style={{ color: Colors.colorRed, fontSize: 17, }}>￥{item.marketprice}</Text>
                                <DeleteTextView text={'￥' + item.productprice} style={{ marginLeft: 3 * unitWidth }} />
                                <View style={{ position: 'absolute', right: 0, flexDirection: 'row', alignItems: 'center', width: 50 * unitWidth, justifyContent: 'space-between' }}>
                                    <ReduceButton onPress={() => {
                                        if (this.state.count - 1 > 0) {
                                            this.changeCount(--this.state.count)
                                        }
                                    }} />
                                    <TextInput
                                        style={{
                                            textAlign: 'center', maxWidth: 40 * unitWidth
                                        }}
                                        onChangeText={(text) => {
                                            if (!text || parseInt(text) < item.total) {
                                                this.changeCount(text)
                                            } else {
                                                this.changeCount(item.total)
                                            }
                                        }}
                                        keyboardType='numeric'
                                        maxLength={8}
                                        value={this.state.count} />
                                    {/* <Text style={{ color: Colors.color99, fontSize: 14, }}>{this.state.count}</Text> */}
                                    <AddButton onPress={() => {
                                        if (parseInt(this.state.count) < item.total) {
                                            this.changeCount(++this.state.count)
                                        } else if (this.state.count == '') {
                                            this.changeCount(1)
                                        }
                                    }} />
                                </View>
                            </View>
                        </View>
                    </View>
                    <SubmitButton1 style={{ position: 'absolute', bottom: 10 * unitWidth }} text='确定' onPress={() => {
                        if (this.state.count == '') {
                            show('请选择数量');
                            return;
                        }
                        this.hideModal();
                        NavigationService.navigate('ConfirmOrder', { id: this.props.item.id, count: this.state.count })
                    }} />
                </Animated.View>
            </RootModal>
        );
    }

    changeCount(num) {
        this.setState({
            count: num.toString()
        })
    }
}

//编辑数量弹框
export class ChangeCountModal extends Component {
    constructor(props) {
        super(props);
        this.state = {
            visible: false,
            scale: new Animated.Value(0),
            count: '0'
        }
    }

    showModal = () => {
        this.state.scale.setValue(0.5);
        this.setState({
            visible: true,
            count: this.props.count
        }, () => {
            Animated.spring(this.state.scale, {
                toValue: 1,
                duration: 250,
            }).start();
        })
    };

    hideModal = () => {
        Animated.timing(this.state.scale, {
            toValue: 0,
            duration: 200,
        }).start(() => {
            this.setState({
                visible: false
            })
        });
    };

    render() {
        return (
            <RootModal
                style={{
                    top: 0,
                    right: 0,
                    bottom: 0,
                    left: 0,
                    position: 'absolute',
                    backgroundColor: 'rgba(0, 0, 0, 0.3)',
                    flex: 1,
                    flexDirection: 'column',
                    justifyContent: 'center',
                    alignItems: 'center',
                }}
                visible={this.state.visible}>
                <TouchableOpacity style={{ height: '100%', width: '100%' }} onPress={() => { this.hideModal() }} />
                <Animated.View style={{
                    width: 273 * unitWidth,
                    height: 125 * unitWidth,
                    borderColor: Colors.color99,
                    borderWidth: 0.5,
                    borderRadius: 10,
                    backgroundColor: '#fff',
                    flexDirection: 'column',
                    alignItems: 'center',
                    position: 'absolute',
                    transform: [{ scale: this.state.scale }]
                }}>
                    <View style={{ flex: 2, justifyContent: 'center', alignItems: 'center' }}>
                        <TextInput
                            style={{
                                width: 200 * unitWidth, backgroundColor: Colors.colorEF, borderRadius: 10
                            }}
                            onChangeText={(text) => {
                                this.setState({
                                    count: text.toString()
                                })
                            }}
                            keyboardType='numeric'
                            maxLength={8}
                            value={this.state.count} />
                    </View>
                    <View style={{ flex: 1.5, flexDirection: 'row', alignItems: 'center' }}>
                        <SubmitButton10 onPress={() => {
                            this.hideModal();
                            this.props.cancelClick ? this.props.cancelClick() : null
                        }} text='取消' />
                        <SubmitButton12 style={{ marginLeft: 30 * unitWidth }} onPress={() => {
                            this.hideModal();
                            this.props.comfirmClick ? this.props.comfirmClick(this.state.count) : null
                        }} text='确定' />
                    </View>
                </Animated.View>
            </RootModal>
        )
    }
}